import React from 'react';
import './App.css'
import {NavLink, useRoutes} from 'react-router-dom'
import routes from './routes';

function App() {
    return (
        <div>
            <div className="header">
                <span className='title'>Header</span>
                <span className='navs'>
                        {routes.map((e, i) => (
                            e.showNav && e.name && <NavLink to={e.path} key={i}>{e.name}</NavLink>
                        ))}
                    </span>
            </div>
            <div className='content'>
                {/*<Routes>
                    <Route path="/" element={<h2>Root</h2>}/>
                    {routes.map((e, i) => (
                        <Route path={e.path} key={i} element={e.element}>
                            {
                                e.children &&
                                e.children.map((t, j) => (
                                    <Route path={t.path} key={j + 100} element={t.element}/>
                                ))
                            }
                        </Route>
                    ))}
                </Routes>*/}
                {useRoutes(routes)}
            </div>
            <div className='footer'>
                Footer
            </div>
        </div>
    );
}

export default App;